<template>
	<view class="pet-info-container">
		<view class="header">
			<image class="paw-print header-paw" src="/static/img/paw-print.svg" mode="aspectFit"></image>
			<text class="title">萌宠档案</text>
		</view>
		
		<view class="no-pet" v-if="!hasPet">
			<image class="empty-img" src="/static/img/default-pet-avatar.svg" mode="aspectFit"></image>
			<text class="empty-text">您还没有添加宠物信息</text>
			<button class="add-pet-btn" @tap="showAddPetModal">添加我的宠物</button>
		</view>
		
		<view class="pet-card" v-else>
			<view class="pet-avatar-container">
				<u-avatar size="120" :src="currentPet.avatar || '/static/img/default-pet-avatar.svg'"></u-avatar>
				<image class="pet-frame-small" src="/static/img/pet-frame.svg" mode="aspectFit"></image>
			</view>
			
			<view class="pet-info-box">
				<view class="pet-name-row">
					<text class="pet-name">{{currentPet.name || '未命名萌宠'}}</text>
					<text class="pet-tag">{{currentPet.type === 'cat' ? '猫咪' : '狗狗'}}</text>
					<text class="level-tag">Lv.{{currentPet.level}}</text>
				</view>
				
				<view class="pet-status">
					<view class="status-item">
						<text class="label">心情</text>
						<view class="progress-bar">
							<view class="progress" :style="{width: currentPet.mood + '%'}"></view>
						</view>
						<text class="value">{{currentPet.mood}}%</text>
					</view>
					
					<view class="status-item">
						<text class="label">饥饿</text>
						<view class="progress-bar">
							<view class="progress" :style="{width: currentPet.hunger + '%'}"></view>
						</view>
						<text class="value">{{currentPet.hunger}}%</text>
					</view>
					
					<view class="status-item">
						<text class="label">体力</text>
						<view class="progress-bar">
							<view class="progress" :style="{width: currentPet.energy + '%'}"></view>
						</view>
						<text class="value">{{currentPet.energy}}%</text>
					</view>
					
					<view class="status-item">
						<text class="label">经验</text>
						<view class="progress-bar">
							<view class="progress" :style="{width: (currentPet.exp % 100) + '%'}"></view>
						</view>
						<text class="value">{{currentPet.exp}}</text>
					</view>
				</view>
				
				<view class="pet-statistics">
					<view class="stat-item">
						<text class="label">总喂食次数</text>
						<text class="value">{{currentPet.statistics.totalFeeds}}次</text>
					</view>
					<view class="stat-item">
						<text class="label">总玩耍次数</text>
						<text class="value">{{currentPet.statistics.totalPlays}}次</text>
					</view>
					<view class="stat-item">
						<text class="label">最爱食物</text>
						<text class="value">{{currentPet.statistics.favoriteFood || '暂无'}}</text>
					</view>
				</view>
				
				<view class="action-btns">
					<button class="action-btn edit-btn" @tap="editPet">编辑</button>
					<button class="action-btn delete-btn" @tap="confirmDelete">删除</button>
				</view>
			</view>
		</view>
		
		<!-- 待开发的功能预告 -->
		<view class="coming-soon">
			<image class="paw-icon" src="/static/img/paw-icon.svg" mode="aspectFit"></image>
			<text>更多功能开发中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasPet: false,
				currentPet: {
					id: '',
					name: '',
					type: 'cat',  // 宠物类型：猫/狗
					avatar: '',    // 宠物头像
					mood: 100,     // 心情值，默认100
					hunger: 100,   // 饥饿值，默认100
					energy: 100,   // 体力值，默认100
					exp: 0,        // 经验值
					level: 1,      // 等级
					lastFeed: '',  // 最后喂食时间
					lastPlay: '',  // 最后玩耍时间
					createdAt: '', // 创建时间
					statistics: {
						totalFeeds: 0,    // 总喂食次数
						totalPlays: 0,    // 总玩耍次数
						favoriteFood: '',  // 最喜欢的食物
						moodHistory: []    // 心情历史记录
					}
				}
			}
		},
		onLoad() {
			this.checkLoginStatus();
			// 这里加载宠物信息
			this.loadPetInfo();
		},
		methods: {
			// 检查登录状态
			async checkLoginStatus() {
				try {
					const user = await this.$leanCloud.user.getCurrent();
					if (!user) {
						uni.redirectTo({
							url: '/pages/login/wechatEntry'
						});
					}
				} catch (error) {
					console.error('检查登录状态失败:', error);
				}
			},
			
			// 加载宠物信息
			async loadPetInfo() {
				try {
					const user = await this.$leanCloud.user.getCurrent();
					if (!user) {
						uni.redirectTo({
							url: '/pages/login/wechatEntry'
						});
						return;
					}
					
					const query = new this.$leanCloud.Query('Pet');
					query.equalTo('user', user);
					const pet = await query.first();
					
					if (pet) {
						this.hasPet = true;
						this.currentPet = {
							id: pet.id,
							name: pet.get('name'),
							type: pet.get('type'),
							avatar: pet.get('avatar'),
							mood: pet.get('mood') || 100,
							hunger: pet.get('hunger') || 100,
							energy: pet.get('energy') || 100,
							exp: pet.get('exp') || 0,
							level: pet.get('level') || 1,
							lastFeed: pet.get('lastFeed'),
							lastPlay: pet.get('lastPlay'),
							createdAt: pet.get('createdAt'),
							statistics: pet.get('statistics') || {
								totalFeeds: 0,
								totalPlays: 0,
								favoriteFood: '',
								moodHistory: []
							}
						};
					} else {
						this.hasPet = false;
					}
				} catch (error) {
					console.error('加载宠物信息失败:', error);
					uni.showToast({
						title: '加载宠物信息失败',
						icon: 'none'
					});
				}
			},
			
			// 计算宠物年龄
			calculateAge(birthday) {
				if (!birthday) return '未填写';
				
				const birthDate = new Date(birthday);
				const now = new Date();
				const yearDiff = now.getFullYear() - birthDate.getFullYear();
				const monthDiff = now.getMonth() - birthDate.getMonth();
				
				if (yearDiff > 0) {
					return `${yearDiff}岁${monthDiff > 0 ? monthDiff + '个月' : ''}`;
				} else {
					const monthAge = monthDiff > 0 ? monthDiff : 0;
					const dayDiff = Math.floor((now - birthDate) / (1000 * 60 * 60 * 24));
					
					if (monthAge > 0) {
						return `${monthAge}个月`;
					} else {
						return `${dayDiff}天`;
					}
				}
			},
			
			// 显示添加宠物模态框
			showAddPetModal() {
				uni.navigateTo({
					url: '/pages/pet/addPet'
				});
			},
			
			// 编辑宠物信息
			editPet() {
				uni.navigateTo({
					url: `/pages/pet/editPet?petId=${this.currentPet.id}`
				});
			},
			
			// 确认删除宠物
			confirmDelete() {
				uni.showModal({
					title: '提示',
					content: '确定要删除该宠物信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.deletePet();
						}
					}
				});
			},
			
			// 删除宠物
			async deletePet() {
				try {
					const pet = this.$leanCloud.Object.createWithoutData('Pet', this.currentPet.id);
					await pet.destroy();
					
					this.hasPet = false;
					this.currentPet = {
						id: '',
						name: '',
						type: 'cat',
						avatar: '',
						mood: 100,
						hunger: 100,
						energy: 100,
						exp: 0,
						level: 1,
						lastFeed: '',
						lastPlay: '',
						createdAt: '',
						statistics: {
							totalFeeds: 0,
							totalPlays: 0,
							favoriteFood: '',
							moodHistory: []
						}
					};
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('删除宠物失败:', error);
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.pet-info-container {
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	/* 头部样式 */
	.header {
		height: 200rpx;
		background: linear-gradient(to right, #FF9F7A, #FFC0A9);
		border-radius: 0 0 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 40rpx;
		
		.title {
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
		}
		
		.header-paw {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			right: 50rpx;
			top: 60rpx;
			opacity: 0.2;
		}
	}
	
	/* 空状态 */
	.no-pet {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 30rpx;
		
		.empty-img {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
			opacity: 0.6;
		}
		
		.empty-text {
			font-size: 30rpx;
			color: #999;
			margin-bottom: 50rpx;
		}
		
		.add-pet-btn {
			background: linear-gradient(to right, #FF9F7A, #FFC0A9);
			color: white;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 60rpx;
			font-size: 28rpx;
			box-shadow: 0 8rpx 16rpx rgba(255, 159, 122, 0.3);
		}
	}
	
	/* 宠物卡片 */
	.pet-card {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.pet-avatar-container {
			position: relative;
			margin-bottom: 20rpx;
			
			.pet-frame-small {
				position: absolute;
				width: 160rpx;
				height: 160rpx;
				top: -20rpx;
				left: -20rpx;
				z-index: 10;
			}
		}
		
		.pet-info-box {
			width: 100%;
			
			.pet-name-row {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.pet-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-right: 20rpx;
				}
				
				.pet-tag {
					font-size: 24rpx;
					color: #fff;
					background-color: #FF9F7A;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					margin-right: 16rpx;
				}
				
				.level-tag {
					font-size: 24rpx;
					color: #fff;
					background-color: #8B5CFF;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
				}
			}
			
			.pet-status {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				
				.status-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						width: 80rpx;
						font-size: 26rpx;
						color: #666;
					}
					
					.progress-bar {
						flex: 1;
						height: 20rpx;
						background-color: #f0f0f0;
						border-radius: 10rpx;
						margin: 0 20rpx;
						overflow: hidden;
						
						.progress {
							height: 100%;
							background: linear-gradient(to right, #FF9F7A, #FFC0A9);
							border-radius: 10rpx;
							transition: width 0.3s ease;
						}
					}
					
					.value {
						width: 80rpx;
						font-size: 24rpx;
						color: #999;
						text-align: right;
					}
				}
			}
			
			.pet-statistics {
				background-color: #f9f9f9;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				
				.stat-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						font-size: 26rpx;
						color: #666;
					}
					
					.value {
						font-size: 26rpx;
						color: #333;
					}
				}
			}
			
			.action-btns {
				display: flex;
				justify-content: space-between;
				
				.action-btn {
					width: 48%;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					
					&.edit-btn {
						background-color: #FF9F7A;
						color: #fff;
					}
					
					&.delete-btn {
						background-color: #fff;
						color: #FF9F7A;
						border: 1px solid #FF9F7A;
					}
				}
			}
		}
	}
	
	/* 功能开发中提示 */
	.coming-soon {
		margin: 60rpx 30rpx 0;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.paw-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
		
		text {
			font-size: 26rpx;
			color: #999;
		}
	}
</style> 